<template>
  <div id="globalSider">
    <a-layout-sider 
      v-if="loginUserStore.loginUser.id" 
      class="sider" 
      width="200"
      :collapsed="collapsed"
      :collapsedWidth="0"
      :trigger="null"
      collapsible
    >
      <a-menu
        mode="inline"
        v-model:selectedKeys="current"
        :items="menuItems"
        @click="doMenuClick"
      />
    </a-layout-sider>
  </div>

</template>




<script setup lang="ts">
// 菜单列表
import { computed, h, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
import {
  PictureOutlined,
  UserOutlined,
  FireOutlined,
  UnorderedListOutlined,
  TeamOutlined,
  MessageOutlined
} from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore'

import { message } from 'ant-design-vue'
const loginUserStore = useLoginUserStore()

// 控制侧边栏展开/收起
const collapsed = ref(true)

// 提供切换侧边栏的方法
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value
}

// 暴露方法和状态给父组件
defineExpose({
  toggleCollapsed,
  collapsed
})

const menuItems = [

  {
    key: '/recreation',
    label: '娱乐',
    title: '娱乐',
    icon: () => h(UnorderedListOutlined),

    children: [
      {
        key: '/recreation/weather',
        label: '天气',
        title: '天气',
      },
      {
        key: '/recreation/zodiac-fortune',
        label: '星座运势',
        title: '星座运势',
      },
      {
        key: '/recreation/news-display',
        label: '新闻热榜',
        title: '新闻热榜',
      },
      {
        key: '/recreation/music-player',
        label: '音乐播放器',
        title: '音乐播放器',
      },

      {
        key: '/recreation/ai-guess',
        label: 'AI海龟汤',
        title: 'AI海龟汤',
      },

    ]
  }
]

const router = useRouter()

// 当前选中菜单
const current = ref<string[]>([])
// 监听路由变化，更新当前选中菜单,高亮菜单项
router.afterEach((to, from, failure) => {
  current.value = [to.path]
})


// 路由跳转事件
const doMenuClick = ({ key }: { key: string }) => {
  router.push(key)
  // 点击菜单项后自动收起侧边栏
  collapsed.value = true
}









</script>


<style scoped>
/*
 * :deep() 是一个深度选择器，
 * 因为 <style> 标签有 scoped 属性，
 * 我们需要用它来修改 Ant Design Vue 子组件的内部样式。
 */

/* 侧边栏容器整体样式 */
#globalSider .sider {
  background: #ffffff; /* 干净的白色背景 */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05); /* 右侧添加柔和的阴影，营造立体感 */
  height: 100vh; /* 让侧边栏高度占满整个视窗 */
}

/* 菜单本身的样式 */
#globalSider .sider :deep(.ant-menu) {
  background: #ffffff; /* 确保菜单背景也是白色 */
  border-right: none; /* Ant Design Menu 默认有一条右边框，我们用阴影替代它 */
}

/* 针对所有菜单项（包括子菜单的标题） */
#globalSider .sider :deep(.ant-menu-item),
#globalSider .sider :deep(.ant-menu-submenu-title) {
  margin: 4px 8px; /* 上下4px，左右8px的外边距，增加呼吸感 */
  width: calc(100% - 16px); /* 宽度自动计算，以适应外边距 */
  border-radius: 6px; /* 6px的圆角，使其更现代化 */
  transition: background-color 0.3s, color 0.3s; /* 添加平滑的过渡动画 */
}

/* 鼠标悬停在【未选中】的菜单项上时的效果 */
#globalSider .sider :deep(.ant-menu-item:not(.ant-menu-item-selected):hover),
#globalSider .sider :deep(.ant-menu-submenu-title:hover) {
  background-color: #f0f6ff; /* 一个非常淡的蓝色背景 */
  color: #1677ff; /* 文字和图标变为 Ant Design 的主蓝色 */
}

/* 【已选中】的菜单项的样式 */
#globalSider .sider :deep(.ant-menu-item-selected) {
  background-color: #e6f4ff; /* 使用一个柔和的淡蓝色作为背景 */
  color: #1677ff; /* 文字和图标为 Ant Design 主蓝色 */
  font-weight: 600; /* 字体加粗，突出显示 */
}

/* 【已选中】菜单项左侧的蓝色竖条（Ant Design 默认是右侧） */
#globalSider .sider :deep(.ant-menu-item-selected::after) {
  /* 这个伪元素是 Ant Design 用来显示选中状态竖条的 */
  border-right: 3px solid #1677ff;
}

/* 子菜单展开后的样式 */
#globalSider .sider :deep(.ant-menu-sub.ant-menu-inline) {
  background: #ffffff; /* 确保子菜单背景也是白色 */
}
</style>
